<!--  -->
<template>
	<a-popover
		position="top"
		trigger="click"
		:arrow-style="{
			width: '15px',
			height: '15px'
		}"
		content-class="lsh-finish-popover"
    :disabled="disabled"
	>
		<div><slot /></div>
		<template #content>
			<div class="lsh-set-box">
        <div class="lsh-set-item" v-if="type === 'pen'">
					<div
						:class="{
							'lsh-set-option': true,
							active: item.value === drawConfig[type].opcity
						}"
						v-for="item in opcityOption"
						:key="item.label"
						@click="handleChange('opcity', item.value)"
					>
						<svg-icon :name="item.icon"/>
					</div>
				</div>
        <div class="lsh-set-item" v-else-if="type === 'shape'">
					<div
						:class="{
							'lsh-set-option': true,
							active: item.value === drawConfig[type].type
						}"
						v-for="item in shapeOption"
						:key="item.value"
						@click="handleChange('type', item.value)"
					>
						<svg-icon :name="`draw-shape-${item.value}`"/>
					</div>
				</div>
				<div class="lsh-set-item" v-if="type === 'text'">
					<div
						:class="{
							'lsh-set-option': true,
							active: item === drawConfig[type].fontSize
						}"
						v-for="item in fontSizeList"
						:key="item"
						@click="handleChange('fontSize', item)"
					>
						<div :style="{ fontSize: item / 1.8 + 'px' }">A</div>
					</div>
				</div>
				<div class="lsh-set-item" v-else>
					<div
						:class="{
							'lsh-set-option': true,
							active: item === drawConfig[type].strokeWidth
						}"
						v-for="item in strokeWidthList"
						:key="item"
						@click="handleChange('strokeWidth', item)"
					>
						<div
							class="lsh-circle-item"
							:style="{ width: item + 'px', height: item + 'px' }"
						></div>
					</div>
				</div>
				<div class="lsh-set-item">
					<div
						:class="{
							'lsh-set-option': true,
							active: item.value === drawConfig[type].color
						}"
						v-for="item in colorOption"
						:key="item.label"
						@click="handleChange('color', item.value)"
					>
						<div
							class="lsh-color-item"
							:style="{ backgroundColor: item.value }"
						>
							<svg-icon name="draw-checked" />
						</div>
					</div>
				</div>
			</div>
		</template>
	</a-popover>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { colorOption, fontSizeList, opcityOption, strokeWidthList } from '../../config'
import { IToolConfig } from '../../types'
import { shapeOption } from '../../config';

const props = withDefaults(
	defineProps<{
		type: 'text' | 'shape' | 'pen',
    disabled?:boolean
	}>(),
	{}
)
const drawConfig = defineModel<IToolConfig>({})
const handleChange = (key: string, value: any) => {
	drawConfig.value[props.type][key] = value
}
</script>
<style scoped lang="less">
@color: #99a1ad;
@activeColor: #0065ff;
.lsh-set-box {
	padding: 10px;
	width: 138px;
	display: flex;
	flex-direction: column;
	.lsh-set-item {
		display: flex;
		gap: 2px;
		flex-wrap: wrap;
		&:nth-child(n + 2)::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #f2f5fa;
			margin: 10px 0;
		}
		.lsh-set-option {
			width: 28px;
			height: 28px;
			overflow: hidden;
			border-radius: 8px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			user-select: none;
			color: @color;
			&:hover,
			&.active {
				background: rgba(0, 101, 255, 0.08);
			}
			.lsh-color-item {
				width: 18px;
				height: 18px;
				border-radius: 4px;
				font-size: 12px;
				color: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.lsh-circle-item {
				border-radius: 50%;
				background-color: @color;
			}
			&.active {
				color: @activeColor;
				.lsh-color-item {
					color: #fff;
				}
				.lsh-circle-item {
					background-color: @activeColor;
				}
			}
		}
	}
}
</style>
<style lang="less">
.lsh-finish-popover {
	border-radius: 16px;
	background: #fff;
	/* 卡片投影 */
	box-shadow: 0px 0px 8px 0px rgba(0, 101, 255, 0.06);
	padding: 0px;
	.arco-popover-content {
		margin-top: 0;
	}
}
</style>
